
<html >

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!-- <script src="js/vue.js"></script> -->
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios-0.18.0.js"></script>
    <script src="../../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css" />
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="../../plugins/morris/morris.css">
    <link rel="stylesheet" href="../../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet" href="../../plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="../../plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet" href="../../plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="../../plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet" href="../../plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet" href="../../plugins/select2/select2.css">
    <link rel="stylesheet" href="../../plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet" href="../../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet" href="../../plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>

<body>

<div id="app">
    <el-button
            style="background-color: black;color: white"
            type="primary"
            @click="dialogFormVisible = true"
    >
        + 新建书籍分类
    </el-button>
    <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
        <thead>
        <tr>
            <th class="text-center">ID</th>
            <th class="text-center">类型</th>
            <th class="text-center">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(brand,index) in brands" >
            <td class="text-center">{{brand.tid}}</td>
            <td class="text-center">{{brand.name}}</td>
            <td class="text-center">
                <el-button round type="danger" v-on:click="delectById(brand.tid)">
                    <i class="el-icon-delete" ></i>删除
                </el-button>

             <td />
        </tr>
        </tbody>
    </table>
    <el-dialog title="新建书籍分类" :visible.sync="dialogFormVisible">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"action="http://localhost:8080/web/addbooktype" method="post">
            <el-form-item label="书籍分类" prop="book">
                <el-input type="text" v-model="ruleForm.book" autocomplete="off" name="name"></el-input>
            </el-form-item>
            <input type="submit" value="提交" @click="submitForm('ruleForm')"></input>
            <input type="button" value="重置" @click="resetForm('ruleForm')"></el-button>
        </el-form>
    </el-dialog>
<!--    class="pageList"-->

    <div class="box-footer">
        <div class="pull-left">
            <div class="form-group form-inline">
                总共{{pages}} 页，共{{total}} 条数据。 每页
                <select class="form-control" v-model="meiye">
                    <option>5</option>
                    <option>10</option>
                    <option>15</option>
                    <option>20</option>
                    <option>50</option>
                    <option>80</option>
                </select> 条
            </div>
        </div>

        <div class="box-tools pull-right">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous" v-on:click="goPage(1)">首页</a>
                </li>
                <li><a href="#" v-on:click="goPage(pageNum-1==0?1:pageNum-1)">上一页</a></li>
                <li v-for="index in (pages>=7)?(7):(pages)"
                    class="paginate_button">
                    <a href="#" @click="goPage(index)">{{index}}</a></li>
                <li><a href="#" @click="goPage(pageNum+1>=pages?pages:pageNum+1)">下一页</a></li>

            </ul>
        </div>
    </div>


</div>

</body>




<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入书籍分类'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            return {
                dialogTableVisible: false,
                dialogFormVisible: false,
                brands:"",
                total: "",
                pages: "",
                pageNum: "",
                size: "",
                meiye:10,
                ruleForm: {
                    book: ''
                },
                rules: {
                    book: [
                        { validator: validatePass, trigger: 'blur' }
                    ]
                },
                formLabelWidth: '120px'
            }
        },
        mounted(){//界面加载完回调函数
           this.selAll()
        },
        methods: {
            goPage(index) {
                var _this = this;
                // 页面加载完成后，发送异步请求，查询数据
                axios({
                    method: "get",
                    url: "http://localhost:8080/web/selectbooktype?page=" + index
                }).then(function (resp) {
                    _this.brands = resp.data.list;
                    _this.total = resp.data.total;
                    _this.pages = resp.data.pages;
                    _this.pageNum = resp.data.pageNum;
                    _this.size = resp.data.size;
                })
            },
            goPage(index) {
                var _this = this;
                // 页面加载完成后，发送异步请求，查询数据
                axios({
                    method: "get",
                    url: "http://localhost:8080/web/selectbooktype?page=" + index+"&size="+_this.meiye
                }).then(function (resp) {
                    _this.brands = resp.data.list;
                    _this.total = resp.data.total;
                    _this.pages = resp.data.pages;
                    _this.pageNum = resp.data.pageNum;
                    _this.size = resp.data.size;
                })
            },
            selAll(){
                var _this=this;
                axios({
                    method:"get",
                    url:"http://localhost:8080/web/selectbooktype"
                }).then(function(resp){
                    _this.brands = resp.data.list;
                    _this.total = resp.data.total;
                    _this.pages = resp.data.pages;
                    _this.pageNum = resp.data.pageNum;
                    _this.size = resp.data.size;
                })
            },
            delectById(id){
                var _this=this;
                axios({
                    method:"post",
                    url: "http://localhost:8080/web/delectbooktype",
                    data: "id="+id
                }).then(function(resp){
                    if (resp.data==false){
                        _this.$message.error('删除失败！');
                    }else {
                        _this.$message.success('删除成功！');
                        _this.selAll()
                    }
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('上传成功!');
                    } else {
                        console.log('上传失败!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })
</script>


</html>